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INTRODUCTION TO WEB 
GRAPHICS 


Understanding the Basics of Web Graphics 


In this chapter, you will: 
è Learn the basics of Web graphics 


è Understand the difference between vector and bitmap graphics, 
and the software you use to create and edit them 


è Get started with Adobe Photoshop and ImageReady 
+ Learn to manipulate images 


è Learn the concepts, terminology, and methods involved in working 
with Web graphics 


wenty-five years ago, computer graphics were of interest only to scientists, 

programmers, and other professionals who had access to high-end, powerful 
computers. When desktop computers with graphical interfaces became popular 
in the mid-1980s, the mainstream population was exposed to computer graph- 
ics for the first time, and they responded enthusiastically. Now that the World 
Wide Web, Windows, and other graphical user interfaces are so widespread, many 
people view and use computer graphics on a daily basis—whenever they turn on 
a computer. 


Adobe Photoshop is the most popular program used to create computer 
graphics. Adobe also publishes graphics software called ImageReady, which 
is similar to Photoshop, but has special features for creating Web-only graph- 
ics such as animations, image maps, and rollover buttons. This chapter intro- 
duces you to these programs. 


When you are familiar with the basic tools of Adobe Photoshop and 
ImageReady, you will be ready to manipulate images. You also will have a chance 
to practice navigating and editing images, and learn some techniques to use for 
creating professional Web graphics. 


The expanding Internet industry will likely continue to provide job oppor- 
tunities for professionally trained, skilled Web graphic artists. 
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APPRECIATING THE VALUE OF WEB GRAPHICS 


Web graphics are sometimes dismissed as mere decoration, but effective graphics 
enhance a Web site, and make it easier to use and understand. As people surf the Web, 
viewing one page after another, they quickly decide whether to stay and explore a site 
or move on. According to Nielsen/NetRatings, Inc., the average user in September 2000 
spent between 50 and 55 seconds viewing a Web page before clicking away. Users 
quickly leave unattractive, uninformative sites, but stay at useful, well-designed ones. 


As a Web designer, you must make your images count—they must be appealing, infor- 
mative, and easy to interpret. When viewed on a standard monitor, Web pages have a 
fixed, limited size, and every square inch of those pages needs to be used efficiently. A 
well-designed graphic often uses less space than a full paragraph of text, yet can be more 
informative and functional. 


Understanding Web Graphics 


Although Web graphics did not even exist ten years ago, for many of us, they are now an 
integral part of our lives. Without graphics, the Web would be much less informative and 
interesting. Before you start creating Web graphics, you must first understand the termi- 
nology that describes graphics for the computer in general, and for the Web in particular. 


The quality of Web graphics also affects viewers’ perceptions of a Web site.A background 
image that obscures text, or an image with jagged edges, gives an impression of amateur 
or careless work. Poor-quality graphics can negatively affect the rest of the site, and make 
the content and services seem unprofessional as well. On the other hand, high-quality 
graphics reassure users that the site is worthy of their trust and time, and users are more 
likely to believe that the products and services the site offers will also be high-quality. 


Understanding Common Computer Graphics Terms 


A computer graphic is different from a drawing on a piece of paper because a drawing 
is an actual image, while a computer graphic is an image file and an image display. 
The image file is a set of instructions that tells the computer what to show on the mon- 
itor; the image display is the image that consequently appears on the monitor. 


To edit a paper drawing, you physically add or remove pigment. However, to edit a com- 
puter graphic, you edit the instructions in the appropriate computer file. When you use 
a graphics program, you have the illusion that you are directly manipulating an image, 
but the process is actually more indirect. The signals from your mouse and keyboard tell 
the software to change the image file; the edited image then appears on your monitor. 


Image displays are grids of tiny squares of colors. Each square is called a pixel, which is 
short for picture element. The grid of pixels is called a bitmap. An image file that pro- 
duces a grid of pixels is called a bitmap file. Paint-type graphics programs typically let 
you create bitmap images, and treat images as collections of dots, not shapes. 
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Another type of image file is a vector. A vector file is a small program that describes the 
position, length, and direction of lines. A vector file contains instructions on how to draw 
pixels, rather than information about the pixels. Draw-type graphics programs typically 
let you create vector images, which are collections of lines, not patterns of individual dots 
or pixels. 


When a vector file is executed, the graphics software renders a new bitmap image display. 
Rendering produces a graphic image from a data file to an output device such as a 
monitor. The act of rendering a vector image file into a bitmap image display is called 
rasterizing. Bitmap images that are created from vector images are sometimes called 
raster images, or rasterized images. Figure 1-1 shows the bitmap image created after ras- 
terizing a vector image. 


Bitmap version 


Vector image 


Figure 1-1 A vector image and its rasterized bitmap version 


The grids of pixels in bitmap images are measured in terms of resolution, or how many 
pixels the monitor can display in an inch. Resolution is measured in pixels per inch, ppi; 
or in dots per inch, dpi. Most monitors have a display resolution of 72 ppi, so a bitmap 
image that is 72 pixels high and 144 pixels wide appears one inch high and two inches 
wide. Bitmap images are resolution-dependent, because the resolution of the moni- 
tor determines the size of the image. If the bitmap image in the previous example 
appeared on a monitor with a resolution of 96 ppi, it would be only three-quarters of 
an inch high and one and one-half inches wide. 


In contrast, a vector image is not measured in pixels, and can appear at any size, regard- 
less of the monitor’s resolution. Vector images are resolution-independent—their size 
is not affected by the resolution of the display device. However, when a vector image is 
rasterized into a bitmap image, the raster image is resolution-dependent. 
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WORKING WITH GRAPHICS SOFTWARE 


Adobe Photoshop is the software most often used for creating graphics for the Web and for 
other media such as print. You can use Photoshop to create vector images, but its main func- 
tion is creating and editing bitmap images. After you work with an image, you should pre- 
view it in a Web browser such as Internet Explorer or Netscape Navigator. You can preview 
images in Photoshop, but most of the time you should preview them in a Web browser, where 
the images ultimately will appear. Browsers can display Web pages and graphics, but cannot 
be used to edit the graphics. 


Working with Vectors 


A vector is a line segment with a specific length and direction. A vector-based image is 
composed of lines, curves, and geometric shapes. These lines have no thickness, only 
length, direction, and degree of curvature. (Pixels, on the other hand, have a uniform 
size and a specific color and position in the bitmap grid.) 


The lines and shapes of a vector image can be either stroked or filled to make the lines 
and shapes in the final image. Vectors themselves do not appear in the final image, but 
they do determine where colors will appear. When a line is stroked, it is given a thick- 
ness and color. A line can be filled only when it loops on itself to form a complete closed 
shape. A shape can be filled with a solid color, a color gradient, or a pattern. Figure 1-2 
shows a raster image created from a vector file. 


Filled with a gradient color 


Stroked with black 


Filled with solid color 


Figure 1-2 A raster image 


To create complex images with vectors, you must separately define every area of solid color 
so that the image looks like a cartoon or a paint-by-numbers kit. Vector images are limited 
because they cannot reproduce rich texture very well. Photographs are never represented 
as vector images because a separate vector shape has to be defined for every spot of detail 
in the image. Vector images are appropriate for simple images, such as line art and graphs. 


As mentioned earlier, one advantage to using vector images is that they are resolution- 
independent, so changes to the image dimensions do not affect the image quality. 
Because vector images are resolution-independent, they also can be scaled to any size 
without changing the image quality or the size of the image file. This is not true for 
bitmap images, which are resolution-dependent. When you increase the dimensions of 
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bitmap images, the resolution decreases accordingly, resulting in jagged edges instead of 
smooth lines. The size of bitmap image files also is linked directly to the image dimen- 
sions, so a larger image means a larger file. Figure 1-3 shows a vector image and a bitmap 
image that have been doubled in size. 


Vector image doubled in size 
Original vector image 


Original bitmap image 


Bitmap image doubled in size 


Figure 1-3 A scaled vector image and a scaled bitmap image 


While vector images tend to have smaller file sizes and scale better than bitmaps, Web 
browsers do not display vector images. Browsers display only bitmap images, so any vector 
image must be rasterized before a browser can display it. Browsers use small programs 
to rasterize vector images into bitmaps on the user’s computer; these programs are called 
plug-ins. Plug-ins have other functions, but one of the most common is converting vec- 
tor images to bitmaps to display those images in a Web browser. 


Dissecting a Vector Image 


In Photoshop, vectors are referred to as paths, and vectors that form complete loops are 
called shapes. Recall that vector images are simple programs—line-by-line commands 
that tell the computer what to display. A sample vector file might contain the following 
code, and produce the image shown in Figure 1-4. 


create background { 
width=4; 
height=4; 
color=white; 

} 

create square { 
upper-left corner: x= 
lower-right corner: x 
color=red; 


} 


The code tells the computer to draw a white background that is four pixels wide and 
four pixels high. The second instruction is to draw a red square two pixels wide and two 
pixels high in the middle of the background. 


Chapter 1 Introduction to Web Graphics 


To add more shapes, you add instructions to the file, and specify the shapes you want. 
Adding instructions makes the image more complex and increases its file size. The pre- 
ceding code has only eight lines of commands, so the file is less than one kilobyte in size. 


The vector file size, however, does not reflect the actual size of the image. For example, 
if you change the image in Figure 1-4 so that the background is 400 x 400 pixels, the 
dimensions of the image change, but the file size remains about the same. The size of a 
vector image file is directly related to the complexity of the image—how many shapes 
the image contains. This is the primary advantage of vector images: changing the dimen- 
sions of the image has no effect on the quality of the image. 


Figure 1-4 A vector image 


Using Software Tools with Vector Images 


When you work with vector images, you do not edit the instructions directly. You use 
an illustration program such as Macromedia FreeHand, Adobe Illustrator, or CorelDraw 
for editing. The tools in these programs act as an interface between you and the image 
file. As you work with an on-screen image, the illustration program makes the appro- 
priate changes to the file. These drawing programs also work with lines and shapes and 
create vector image files, which can then be rasterized into bitmap images and displayed 
on a Web page. Additionally, illustration programs let you perform common vector-editing 
tasks, such as creating simple line art or technical diagrams. 


Rasterizing Vector Images 


Vector images were perfect for old-style line printers. Those printers had a mechanical arm 
with a stylus that drew shapes according to the instructions in the image file. Modern 
printers and computer monitors, however, do not print or display images that way. They 
work with grids of pixels and display one pixel after another in a horizontal row, and line 
by line vertically from top to bottom. Look closely at your computer screen, and you can 
see the individual pixels that make up every desktop icon, character, window, and graphic. 


To display a vector image on the screen in this pixel-grid style, an illustration program has 
to render, or rasterize, the image by executing the vector image file and generating a map 
of pixels, known as a bitmap. The vector image is composed of lines and geometric shapes, 
as mentioned earlier, and rasterizing the vector image converts these lines and shapes onto 
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a grid of pixels. The new bitmap image file contains none of the vector information in the 
original file. The bitmap file simply lists the color value of each pixel in the grid. Figure 1-5 
illustrates how a program rasterizes a vector image by converting it to a bitmap image. 


Figure 1-5 Rasterizing an image 


Working with Bitmaps 


Bitmap images have two advantages over vector images: They display texture better and 
do not need to be rasterized to appear in a Web page, so they do not require the use of 
a plug-in. 


The amount of detail in a vector image is limited by the number of shapes the image has, 
but the detail in a bitmap image is limited by the number of pixels. A small bitmap image 
that appears as a one-inch square on a standard monitor has over five thousand separate 
pixels. A vector image with many shapes is so complicated that the process of rasterizing 
it into a bitmap image takes several seconds to place each shape. The level of detail pos- 
sible in bitmap images has a cost, however. Bitmap files tend to have much larger file sizes 
than do vector images. Although bitmap files can contain more texture and visual infor- 
mation, they take longer to download. 


Vector images and bitmap images are fundamentally different in the way they store infor- 
mation. Whereas a vector image file is a list of the shapes included in the complete 
image, a bitmap image file is simply a list of pixels, each one with its own color. To define 
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the shape in Figure 1-4 using a bitmap, the image file might contain the following code, 
and then create the image shown in Figure 1-6. 


0,0 = white 
1,0 = white 
2,0 = white 
3,0 = white 
0,1 = white 
1,1 = red 

2,1 = red 

3,1 = white 
0,2 = white 
1,2 = red 

2,2 = red 

3,2 = white 
0,3 = white 
1,3 = white 
2,3 = white 
3,3 = white 


Figure 1-6 A bitmap image file 


Notice that the axes are centered in the upper-left corner of the image. This is how Web 
graphics are always defined. The pixel grid numbers the columns from left to right, start- 
ing with zero, and numbers the rows from top to bottom, also starting with zero. 


The image in Figure 1-6 is not complex, and the dimensions are small, so the vector 
image in Figure 1-4 is not noticeably different from the bitmap version shown in 
Figure 1-6. Imagine doubling the width of each image. To do so, you change only a few 
numbers in the vector image file—set the width to eight instead of four. In the bitmap 
image, however, you must define the color for twice as many pixels—the new image has 
the same number of rows but twice the number of columns. That doubles the informa- 
tion in the image file, and thus doubles the file size. 


As explained earlier, the file size of a vector image is affected by how complex the image 
is, not how big it is when it appears. Figure 1-7 shows what happens if the image in 
Figure 1-4 is scaled, or resized, to double its original width. This new image has larger 
dimensions but does not have a larger file size. 
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On the other hand, because bitmap images are resolution-dependent, the dimensions of a 
bitmap image affect the size of the bitmap file. Doubling the width or height of a bitmap 
image roughly doubles the file size. Figure 1-8 shows what happens if Figure 1-6 also is scaled 
to double the original width. The number of pixels doubles, making the file size larger. 


bor~ega4ysS 746910 


1012345 746910 


Figure 1-8 A scaled bitmap image 


All Web graphics must be transferred over networks, from the Web servers where they 
are stored to users’ computers and Web browsers. Images with smaller file sizes are trans- 
ferred more quickly than are image files with larger sizes. Much of your work in creat- 
ing Web graphics involves keeping file sizes as small as possible. 


When you choose to use either vector or bitmap images, first determine which type 
produces the image that you desire, and then decide which type is most convenient for 
the user to view. 


Printing and Viewing Graphics 


Although you do most of your graphics work with a paint-like editor such as Photoshop, 
occasionally you will use a drawing program such as FreeHand or Illustrator to create a 
vector-based logo or figure. A printed vector image usually is much cleaner than a printed 
bitmap image. You've seen this if you’ve ever printed a Web page; the bitmap graphics were 
probably fuzzy instead of crisp. 
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To display the vector images on the Web, however, you must export the image into a 
bitmap. This is the same process as when a drawing program rasters the drawing, convert- 
ing it into a bitmap. Although it’s easy to convert a vector image to a bitmap image, it’s 
nearly impossible to convert a bitmap to a vector image. As shown in Figure 1-9, you can 
rasterize a vector image so you can display it on a computer monitor, in a bitmap graphic, 
or on a printer. You can display a bitmap graphic on a monitor or printer, but you 
cannot convert it to a vector image. 


Vector Image File 


| 


Rasterizer 


Monitor 4— Bitmap Image File —— Printer 


Figure 1-9 Relationship between vector and bitmap images 


In general, vector images download quickly, but do not display texture detail as well as 
bitmap images. Always use bitmap images for photographs. 


Web browsers cannot display vector images; they display bitmap images only. A browser 
uses a plug-in to rasterize vector images into bitmap images that can be shown in the 
browser. Because browsers require plug-ins to display vector images, you use bitmap 
images for almost all Web graphics. 


GETTING STARTED WITH ADOBE PHOTOSHOP AND IMAGEREADY 


The most recent version of Adobe Photoshop, version 6.0, comes bundled with Adobe 
ImageReady, version 3.0. ImageReady and Photoshop both are used to create and edit 
computer graphics, but ImageReady has fewer features and is designed specifically for 
creating Web-only graphics such as animations. Photoshop has more general features and 
can be used to create graphics for print, software, or the Web. To complete the steps and 
exercises in this book, you must use Photoshop and ImageReady. 


Choosing Web Graphics Tools 


Software that works with vector images are typically called drawing programs, while 
software that lets you manipulate bitmap images are called image editors. Some exam- 
ples of drawing programs are Adobe Illustrator, CorelDraw, and Macromedia FreeHand. 
Because drawing programs produce vector images, and because vector images have bet- 
ter print quality than bitmap images, you usually use drawing programs for print pro- 
jects such as magazine ads or letterheads. You also can use them to design graphics such 
as logos that appear in print and on the Web. 
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However, image editors are what you will most often use to create Web graphics, such 
as Adobe Photoshop and Macromedia Fireworks. You also can use many freeware and 
shareware programs such as PaintShop Pro or The GIMP to edit images. (Most editors 
can open image files created in other editors.) 


Becoming Familiar with Your Work Environment 


Before you can become fully proficient with any software, you first must become familiar 
with the software’s features and how they work. Every Photoshop version has more fea- 
tures than the last, and can overwhelm new users. Many features are redundant, and sim- 
ply provide different ways to do the same thing. Take some time to investigate Photoshop 
and ImageReady, and learn which tools you will use frequently, and which you will use 
only in special circumstances. Not only is Photoshop an excellent tool for designing and 
creating graphics, but it also provides a well-designed interface, with easy-to-access fea- 
tures. The following sections introduce you to the Photoshop and ImageReady palettes, 
tools, and menus. Figure 1-10 shows the Photoshop environment components—the menu 
bar, Options bar, Image window, toolbox, status bar, and all palettes. 


Photoshop window 


E Adobe Photoshop 
File Edit Image Layer Select Filter View Window Help Menu bar 


ll Q| I Resize Windows To Fit | I Ignore Palettes | Actual Pixels | Fit On Screen | Print Size | Options bar 


Image window 


Palettes 


Toolbox 


Status bar 
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Doc: 30K/79K b Click or drag over the area you want to enlarge. Press ALT ` 


Figure 1-10 The Photoshop environment 
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Using Palettes 


The Photoshop work area contains several windows in addition to the window that dis- 
plays the image. These additional windows are called palettes, and they contain tools, 
commands, and settings. You use palettes to select options for tracking and editing 
images. You select colors from the Color palette, parts of images from the Layers palette, 
tools from the toolbox, and so on. 


Most palettes are grouped together to save space on the desktop, but you can open a sin- 
gle palette by dragging its tab. The palettes contain a triangle in the upper-right section of 
the palette window. Click the triangle to open a menu of options for the palette. These 
options change depending on which palette you select. For example, click the triangle on 
the Swatches palette and you see a menu of options for creating and editing color swatches. 
Figure 1-11 shows options for working with the Channels palette. 


Palette tabs 
Minimize button 


Close button 


Menu button 


Duplicate ehranme 
Dele Chenne) 


New Spot Channel... 


Merge Spobishennel Palette menu 


Ghame Wpions.. 


Palette tool icons 


=| eae atretirrelse 


g T. Palette Options... 


Figure 1-11 Channels palette options 


To save room on your desktop, you can minimize or close the palettes. To re-open them, 
click Window on the menu bar, and then click the command to show the palette you 
need. For example, to open the Color palette, click Window on the menu bar, and then 
click Show Color. 


Info Palettes The Info palettes provide general information about the image in the 
Image window, and include the Navigator palette and the Info palette itself. The 
Navigator palette shows you a small version of the opened image. You use the Navigator 
palette to change the scale of the image display in Photoshop. The Info palette, shown in 
Figure 1-12, shows you information about colors and dimensions of the image. You use 
the Info palette to see information about the color value and position of individual pix- 
els in the image. ImageReady includes an additional Info palette called the Optimize 
palette. The Optimize palette shows information about the size of the image file, and 
allows you to shrink the image file without affecting the quality of the image. 
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Figure 1-12 The Info palette 


Color Palettes The Color palette shows you the selected color and lets you select new 
colors by sliding bars or entering numerical color values. The Swatches palette, illus- 
trated in Figure 1-13, shows a table of commonly used colors. You use the Swatches 
palette to select colors without having to indicate their numerical values. The Style 
palette contains effects you can add to images. ImageReady uses the Color Table palette, 
which shows information about the colors used in the image. ImageReady also uses the 
Layer Options/Style palette, which shows information about effects used in the image. 


Figure 1-13 The Swatches palette 


Action Palettes The Action palettes include the History palette, which lets you track 
your actions, and the Actions palette, which lets you create and edit a series of com- 
mands, which you then can play back on one or more files. The History palette, shown 
in Figure 1-14, lists recent edits made to the image. You can undo commands and reverse 
most edits you have made to an image by selecting different states in the History palette. 
The Actions palette contains sequences of edits that you can run as scripts. The Actions 
palette allows you to automate certain processes so that you do not have to perform the 
same sequence of edits manually on multiple images. 


Figure 1-14 The History palette 
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View Palettes A number of palettes, including the Layers, Channels, and Paths palettes, 
let you work with different parts of the image. The Layers palette shows information 
about layers used in the image. Layers are like sheets of transparent film laid on top of 
each other, each containing different parts of an image. You use layers to manipulate indi- 
vidual pieces of an image. The Layers palette is shown in Figure 1-15. The Channels 
palette shows information about colors used in the image. You can modify color chan- 
nels independently to create interesting visual effects. A color channel is the set of all 
shades of a particular color. A full-color image has three color channels, one for all shades 
of red, one for green, and one for blue. A color image is the combination of the color 
channels. The Paths palette shows information about vectors used in the image. 


[Normal z] Opacity: 
lock FCA O+ Ce 


Figure 1-145 The Layers palette 


Web Effects Palettes (ImageReady Only) Photoshop is an all-purpose image edit- 
ing program that lets you create images that can be displayed in print, on the Web, or in 
digital video projects. ImageReady is primarily used to create images for the Web. It 
shares many features with Photoshop, but does not contain some tools that are appro- 
priate for print projects only. However, ImageReady does contain some Web-only fea- 
tures that are not available in Photoshop. 


The following four ImageReady-only palettes are generally used for creating Web-only 
graphics such as image maps, and buttons that change when rolled over with the mouse. 


a The Animation palette is where you compose animated images. You usually 
save these files as simple animations that play on a Web page, though you can 
also save them as complicated movies that users can download from a Web site. 


a The Rollover palette lets you create rollover effects. Rollover effects 
involve dynamically replacing one image with another when the user’s mouse 
rolls over the image, for example, when you point to a button and it changes 
color or position. The Rollover palette is shown in Figure 1-16. 


a The Image Map palette shows information about images being used as image 
maps. Image maps are normal images that can link to multiple destinations. 


a The Slice palette shows information about slices, which are pieces of a single 
image that are saved as separate images. 
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Figure 1-16 The Rollover palette 


Text Palettes You use the Character and Paragraph palettes to manipulate text in your 
images. The Character palette lets you control settings for fonts. The Paragraph palette lets you 
adjust the alignment and justification of text. The Character palette is shown in Figure 1-17. 


Character 
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Figure 1-17 The Character palette 


Tool Palettes The toolbox and Options bar are considered tool palettes because they 
let you work with the Photoshop and ImageReady tools. The toolbox contains the tools 
you use to edit images, and is shown in Figure 1-18. 


Drag the toolbox with the title bar 


Adobe Online 


Selection tools 


Bitmap tools 


Vector tools 


Navigation tools 
Color tools 


View option buttons 


+— Jump button 


Figure 1-18 The toolbox 
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The Options bar contains settings for the toolbox tools, and is shown in Figure 1-19. 
For example, when the Magic Wand tool is selected in the toolbox, the Options bar dis- 
plays options for tolerance and when the selection should be anti-aliased. When the 
Paintbrush tool is selected in the toolbox, the Options bar displays options for the size 
of the brush and the quality of the mark produced by the brush. 


The Options bar, 
showing options for the 
Paintbrush tool 
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The Options bar, showing 
options for the Magic 
Wand tool 
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Figure 1-19 The Options bar 


Using the Toolbox 


You often use the toolbox when working with Photoshop and ImageReady. The toolbox 
contains most of the tools you use to manipulate images. For example, you use tools to 
select parts of the image, add color, magnify, and move images. Each tool has its own 
pointer to indicate how it affects the image. Some buttons on the toolbox are not tools, 
but are quick ways to adjust settings. The following sections briefly describe each tool in 
the toolbox. They are described in more detail in following chapters. 


Adobe Online 


Click the Adobe Online logo in either Photoshop or ImageReady to visit the Adobe 
Web site where you can access online help and find software upgrades. 


Selection Tools 


The selection tools let you select a specific group of pixels, or divide the image into separate 
pieces. See the Acquiring Images chapter for more details about using the selection tools 
listed below: 


a The Marquee tools create elliptical and rectangular selection areas. 
a The Move tool lets you drag selected areas to other parts of the image. 
m The Lasso tools let you create selection areas of any shape. 


a The Magic Wand tool lets you click a pixel and then select pixels in the 
image that are similar in color to the pixel you clicked. You can then manip- 
ulate all of these pixels at once with a tool, filter, or command. 


m The Crop tool selects an area of an image. Double-clicking the selected area 
discards all of the image area outside the currently selected area. 
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ImageReady includes one selection tool not offered in Photoshop—the Image 
Map tool. You use this tool to define linked areas in image maps. Image maps 
are single images that can link to different destinations. 


The Slice tool is similar to the Crop tool, but instead of selecting one area 
and discarding the rest, you can use the Slice tool to split the entire image 
into many slices that are all saved as separate images. 


Bitmap Tools 


The Bitmap tools listed below allow you to change the colors of pixels in an image by 
adding patterns, and by adding, removing, lightening, or darkening colors. See the 
Acquiring Images chapter for more details about using the Bitmap tools. 


The Airbrush tool lets you paint over the image using the foreground color, 
creating a spray paint effect. Holding the pointer over one area increases the 
intensity of the painted line. 


The Paintbrush tool is similar to the Airbrush, but holding the pointer over 
an area does not affect the painted line. The edges of lines painted with the 
Paintbrush tool are not as soft as those painted with the Airbrush tool. 


The Pencil tool also is similar to the Airbrush, but lines created with the 
Pencil have a hard edge. 


The Clone Stamp tools let you copy area in the image and use that area as a 
texture with which to paint. These tools are useful for retouching photographs. 


The History Brush tools let you change the patterns of pixels in your image. As 
you make changes to an image, Photoshop keeps a copy of the original. When 
you use the History Brush tool to paint over an image, instead of applying 
color, it applies the pixels which have been retrieved from the original version 
of the image. The Art History Brush applies random patterns to the image as 
you paint across it and creates soft, pseudo-Impressionist style effects. 


The Eraser tools let you erase pixels instead of adding them when you drag 
the pointer over an image. The Magic Eraser tool works like the Magic Wand 
tool; first you click a pixel containing the color you want to delete, and then, 
only pixels that are similar in color to the pixel you clicked are erased. 


The Gradient tool covers the entire image with both the foreground and 
background colors, fading from one color to the other. 


The Paint Bucket tool fills an area with the foreground color. It also affects 
pixels of similar color to the one you click. 


The Blur tool softens the edges in images, while the Sharpen tool exaggerates 
them. The Smudge tool lets you drag pixels across an image, creating a 
smeared effect. 


The Dodge tool lightens the area you paint over, and the Burn tool darkens 
them. The Sponge tool lets you remove color from an area without affecting 
the shapes and contrast in the image. 
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Vector Tools 


Vector tools allow you to create and edit vector paths and text, or type. Photoshop is 
not considered a vector program because it is used primarily to generate bitmap images. 
However, the newer versions of Photoshop contain tools that create vectors within 
bitmap images. These vectors are called paths in Photoshop and ImageReady, and must 
be rasterized into bitmap information before the image can be saved as a bitmap file. A 
list of vector tools in Photoshop and ImageReady follows: 


a The Path Selection tool lets you select individual paths to modify or reposition. 
a The Type tool adds text to images. 


m The Pen tools do not draw lines the way the Paintbrush or Pencil tools do. 
Pen tools allow you to create and edit vector paths. 


a The Shape tools create closed paths such as ellipses, rectangles, and polygons. 


Navigation Tools 


Use the navigation tools listed below to find out information about an image, or to nav- 
igate around an image. 


a The Documentation tools let you add text or audio notes to images. 


a The Eyedropper tools let you sample the color value of a given pixel and set 
the foreground color to that color value. 


a The Measure tool gauges the distance between any two pixels. 


a The Hand tool lets you navigate to different parts of the image. If the image 
is larger than the Image window in which it appears, you can adjust the visi- 
ble part of the image by moving the scroll bars on the right and bottom of 
the Image window. 


a The Zoom tool is also called the Magnifying Glass tool and allows you to 
change the scale at which the image appears. Using this tool does not change 
the dimensions of the image, only how it appears in Photoshop or ImageReady. 

Color Tools 


You use the color tools to control the foreground color used by the Painting tools, and 
the background color used by the Eraser tools. The Photoshop and ImageReady Color 
tools are listed below: 


m Set Foreground Color 
m Set Background Color 
a Default Foreground and Background Colors 


a Switch Foreground and Background Colors 
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View Options 


You use the View Option buttons listed below to switch between different view settings. 
Normally, you will work only with the default settings, but occasionally you will need 
to preview your work in a different way, using one of the following: 


a Toggle Image Map Visibility (ImageReady only) 
a Toggle Slices Visibility (ImageReady only) 

a Rollover Preview (ImageReady only) 

a Preview in Browser (ImageReady only) 

a Selection View Mode 


m Screen Mode 


Jump 


You click the Jump button to open the current image file in the alternate Adobe image edit- 
ing program. For example, clicking Jump in Photoshop opens the image in ImageReady, and 
clicking Jump in ImageReady opens the image in Photoshop. 


Using Menus 


The menus in Photoshop and ImageReady contain commands that affect the image file 
and/or the image display. According to Macintosh and Windows standards, most of these 
commands have keyboard shortcuts which are indicated next to the commands in the menu. 
Many commands open dialog boxes where you choose related settings and options. For 
example, you choose Image Size from the Image menu to open the Image Size dialog box, 
where you then can specify the width and height of an image. You also can point to many 
commands to open submenus that list related commands. A list of each Photoshop and 
ImageReady menu follows, with a brief description of the most commonly used commands. 


a The File menu lists commands that work with image files. Among those 
commands are Open, Close, Save, and Print images. 


a The Edit menu includes the Copy, Paste, and Undo commands. It also includes 
the Preferences submenu, which lists options, such as saving files or using units 
of measurement, to set your preferences for working with Photoshop. 


a The Image menu lists commands to adjust the colors in an image as well as 
commands to change the dimensions of an image. 


a The Layer menu lists commands to rasterize vector image information into 
bitmap information, and commands to work with layers in an image. 


a The Slices menu is included in ImageReady only. This menu lists commands 
that manipulate separate pieces of an image, known as slices. 
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a The Select menu lists commands that work with the Marquee, Lasso, and 
Magic Wand tools to control the selection areas in an image. 


a The Filter menu lists 14 submenus of filters, that affect entire images or 
selections of images. You use filters to create special effects, such as blurring 
or adding texture in images. 


a The View menu includes commands that affect the way the image appears in 
the Photoshop window, but do not change the image file itself. This menu 
contains an option to Show Rulers, which displays a pair of rulers above and 
to the left of the image. Rulers are helpful because they let you see the dimen- 
sions of your images. Figure 1-20 demonstrates an image with rulers showing. 
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Figure 1-20 An image with rulers showing 


The Window menu lists commands that affect the appearance of the windows and 
palettes used by Photoshop. 


The Help menu contains links to information about Photoshop, ImageReady, and Adobe. 


Documenting Images 


Photoshop has two tools that allow you to add comments to an image. The Notes tool 
lets you add a text box to an image. The text box is associated with a particular spot 
on the image and can be useful when collaborating on an image. The Audio 
Annotation tool allows you to add a spoken message to the image. This tool requires 
that you have a microphone on your computer. Both of these types of documentation 
can be saved only in the special Photoshop PSD format, and cannot be viewed over 
the Web. Figure 1-21 shows the Notes and Audio Annotation tools in the toolbox. 


Getting Started with Adobe Photoshop and ImageReady 21 


Figure 1-21 The Notes and Audio Annotation tools 


Setting Preferences 


You can set a variety of preferences to customize your work on Photoshop and 
ImageReady. On the File menu, point to Preferences to see a submenu of ten options. 
Choose a Preference option to open the Preferences dialog box, where you can change 
general settings, such as the units used on rulers and in measurements. Before you begin 
working with Photoshop to create Web graphics, you need to change the Units & Rulers 
setting. Graphics intended for print output are usually measured in inches. Graphics used 
on a Web page, however, are usually measured in pixels. Therefore, you must make sure 
that the rulers on the Image window use pixels as the measurement unit. 


To change the measurement units used in Photoshop: 
1. Click Edit on the menu bar. 


2. Point to Preferences, and then click Units & Rulers. You see the 
Preferences dialog box, as shown in Figure 1-22. 


3. In the Units area, click the Rulers list arrow, and then click pixels. 
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Preferences 


Units & Rulers ~] 


Figure 1-22 The Preferences dialog box 


MANIPULATING BITMAP IMAGES WITH PHOTOSHOP 


Most of your work creating Web graphics involves editing bitmap images, probably using 
Photoshop or a similar graphics program. While you use some features of Photoshop 
only in special circumstances, you use other features for your work with almost every 
image. The features you use most often change the scale and dimensions of an image, 
and reverse edits you make to an image. Each of these frequently used features is dis- 
cussed in the following sections. 


Changing the Scale of Bitmap Images 


You often will want to change the scale of an image without changing the actual image 
file.You need to be able to magnify (zoom in) and reduce (zoom out) your view of the 
image without altering the actual dimensions of the image. 


The easiest way to zoom in and out is with the Magnifying Glass tool, also called the 
Zoom tool. 


To change your view of an image using the Zoom tool: 


a To zoom in, click the Zoom tool, and then click the image; to zoom out, 
hold down the Option key on the Macintosh, and click the image. 


In Windows you can zoom out by clicking the Zoom tool, holding down the 
gt Alt key, and then clicking the image. 
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You also can drag the Zoom tool across the image to zoom in to the selected area, as 
shown in Figure 1-23. 
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Figure 1-23 Dragging the Zoom tool across an image 


Besides using the Zoom tool, you can also change magnification using menu options 
and the Navigator palette. 


To change magnification using menu options: 


1. Click View on the menu bar, and then click Fit on Screen to zoom in on 
the image so that its outer edges reach the edges of the Photoshop work area. 


2. To return the magnification to 100%, click View on the menu bar, and then 
click Actual Pixels; you also can double-click the Zoom tool. 


To change magnification using the Navigator palette: 


1. To control magnification in the Navigator palette, shown in Figure 1-24, use 
the slider at the bottom of the palette. Drag the slider to the left to reduce 
magnification, and to the right to increase magnification. 


2. The area of the current image is surrounded by a red border. Drag the red 
square to change which part of the image you view in the Image window. 
You also can use the Hand tool to drag the image in the Image window. 


The status bar at the bottom of the Photoshop window indicates the current percent- 
age of scale. For example, 100% indicates that the image appears at its true size. A scale 
of 200% means the image appears twice as large as it really is, with half the resolution. 
A scale of 50% means the image appears only half as large as its true size. You can type 
directly on the status bar to change the scale. 


Chapter 1 Introduction to Web Graphics 


Current scale 


Viewable area of image 
Complete image area 


as Slider bar for changing scale 
Lo 


= 


Figure 1-24 Using the Navigator palette for zooming 


Changing the Dimensions of Bitmap Images 


Changing the scale of an image means altering the height and width of how the image 
appears in Photoshop. Changing the scale does not affect the image file and does not affect 
how the image appears in a browser. Changing the dimensions means changing the actual 
height and width of an image. In Photoshop, the term canvas refers to the dimensions of 
an image. An image’s canvas size is its height and width in pixels. 


In Photoshop you alter image dimensions with the Image Size and Canvas Size tools. Image 
Size lets you stretch or shrink the image, while Canvas Size lets you pad or crop the image. 
When you select the Canvas Size tool, you see the Canvas Size dialog box, shown in 
Figure 1-25, where you can specify how much you want to pad or crop the image. 


Canvas Size 
M Current Size: 118K 


Width: 200 pixels 
Height: 200 pixels 


m New Size: 939K —— 
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Anchor: 


Figure 1-25 The Canvas Size dialog box 
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When you pad or crop, you change the size of the canvas, but not the image itself. For 
example, you could crop an image of a cloud over a tree to remove the cloud. The dimen- 
sions of the cropped image are smaller, but the size of the tree stays the same. Stretching 
and shrinking with the Image Size tool affects both the canvas size and the image size. 
For example, if you shrink the image of the cloud over a tree, you reduce the size of the 
cloud and the tree, as well as the amount of space they take up in the window. 


Figure 1-26 illustrates the effect of using the Image Size command in Photoshop. To 
familiarize yourself with these tools, use the Image Size option to stretch and shrink an 
image, and use the Canvas Size command to change an image’s viewable area, while 
maintaining the size of the elements within that image. 


Original image 


a “= Original image stretched with the Image Size tool 


Original image shrunk with the Image Size tool 


hd 


<——_—_——__ Original image padded with the Canvas Size tool 


Original image cropped with the Canvas Size tool 


Figure 1-26 Padding and cropping 


Padding means increasing the width or height of an image, and includes filling the new 
space with background color, while cropping actually cuts away from the image to fit a 
new size. By setting an anchor point in the Canvas Size window, you can control the 
direction of the padding or cropping. For example, if you select the center anchor point, 
padding or cropping occurs evenly on all sides of the image. If you select another anchor 
point, padding or cropping occurs on the opposite side of the image. 


The Canvas Size dialog box illustrated in Figure 1-25 has settings that pad the selected image 
by adding 10 pixels to the left side, and crop the image by cutting 50 pixels from the top. 
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The following steps show you how to pad and crop an image using the Canvas Size tool. 


To pad and crop an image using the Canvas Size tool: 


1. 
2: 


5. 


Open the image file pad.tif from the Data Disk. 


Click Image on the menu bar, and then click Canvas Size. The Canvas Size 
dialog box illustrated in Figure 1-25 appears and shows the current dimen- 
sions of the image. 


. Set the Width to 100 pixels and the Height to 150 pixels. Select the 


top-center anchor box. Click OK. When you see a confirmation dialog 
box, click Proceed. 


. Review the image, which should appear narrower, but taller. The image itself 


has not been stretched or shrunk, but the right half of the image should be 
gone, and an extra 30 pixels of space should be added to the bottom. 


Save the image as pad.tif in the Chapter 1 folder on your hard drive. 


Besides using the Canvas Size dialog box, you also can crop with the Crop tool, or use 
the Trim command to crop away the background. The Trim command removes the mar- 
gins around an image, based on similar colors. If the color edges are uneven, the image 
is cropped at the point where a new color starts. The Trim command works only if an 
image’s background is a uniform color. 


To pad and crop an image using the Crop tool: 


1 


nN 


. Open the image file crop.tif from the Data Disk. 
. Select the Crop tool. 
. Drag the pointer over the object in the image. A selection box appears. 


2 
3 
4. 
5 


Drag the selection tabs to adjust the selection area. 


. To set the crop, double-click inside the selection area, or click Image, and 


then click Crop. The image is cropped to the specified size. 


. Click Edit on the menu bar, and then click Undo Crop. 


7. In the Options bar, set the Width to 50 and the Height to 75. 


10. 


. Drag the pointer over the image again. This time the ratio of height to width 


is constrained. Adjust the selection tabs to completely enclose the figure. 


. Double-click inside the selection area. The image is cropped and resized to 


50 x 75 pixels. 


Save the image as crop.tif in the Chapter 1 folder on your hard drive. 
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Changing Your Mind 


Photoshop and ImageReady contain several ways for you to change edits you have made 
to an image. Like most software, Photoshop and ImageReady have an Undo command 
that reverses your most recent edit, whether it is running a filter, making a selection, or 
using a tool. You can specify a maximum number of steps the Undo feature can reverse. 


To set the maximum number of steps Undo can reverse: 
1. Click Edit on the menu bar, point to Preferences, and click General. 


2. The General dialog box opens. In the History States text box, enter the maxi- 
mum number of steps you want Undo to reverse. The default number of his- 
tory states for the Undo command is 20. If you increase this number, 
Photoshop runs more slowly. 


You can see all the past edits made to an image in the History palette, where you also 
can review recent changes and delete multiple edits. The history is deleted, or purged, 
when an image is closed. After saving an image, you cannot use the Undo command to 
reverse changes made before the save. You can, however, use the Step Backward com- 
mand to view the image without the most recent edit. The Step Backward command is 
available on the Edit menu, and from the History palette. This command does not delete 
the edits, it only lets you see the image without them. 


To delete your changes, perform one of the following activities: 


a In the History palette, select the changes you want to delete, and then click 
the trashcan icon. 


a Drag the changes you want to delete to the trashcan icon. 
a Click the History palette list arrow, and then click Delete. 


a To quickly delete all the changes you made to an image, click File on the menu 
bar, and then click Revert. Using the Revert command returns the image to the 
way it was when it was last saved, or last opened if you did not save it. 


PULLING IT ALL TOGETHER: AN OVERVIEW OF PROFESSIONAL WEB 
GRAPHICS 


This chapter introduced you to the basic concepts of Web graphics and the tools and 
techniques you use to create them. In the remaining chapters, you will learn more 
detailed methods for creating graphics for the Web. 


There are several distinct types of Web graphics, and a number of concepts associated with 
each type. This book is structured so that each remaining chapter covers one type of graphic 
or one concept. The chapters are grouped together into three main sections: Basic, 
Intermediate, and Advanced Web Graphics. The following sections provide an overview of 
Web graphics so you know what to expect as you work through the book. 
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Basic Web Graphics: Optimizing, Displaying, and Acquiring Images 


The first third of this book covers general topics about computer graphics and issues 
about Web graphics that apply to every project on which you work. These general top- 
ics include an introduction to Photoshop, optimizing images, displaying graphics in Web 
pages, and acquiring images to use on the Web. 


An Overview of Optimizing Images 


Optimizing refers to making the image file size as small as possible without compromising 
the quality of the image—your major goal in creating graphics for the Web. Currently, the 
limiting factor on the Web is bandwidth. Regardless of the size or quality of your computer 
or your Web server, most users have to wait a few seconds before your Web page is down- 
loaded and rendered on the page. In the next five to ten years, broadband technology should 
remedy this. Until then, every Web page must be as small as possible to minimize the down- 
load time. 


Most Web files, whether HTML, image, or other format, have extra space in the file that 
is not used for anything crucial. Just as a sponge has pockets of air inside it that con- 
tribute to the volume of the sponge without contributing to the mass, computer files 
often have unused space that does not add any value. Optimizing means squeezing out 
this unnecessary space from the files. Every graphic you create, whether it be a logo, an 
animation, or an image map, must be optimized. 


An Overview of Displaying Images 


After you optimize your images, you incorporate them into a Web page and preview 
them in a browser so you know how they will appear on users’ screens. To include images 
on a Web page, you need to use and understand HTML code. Graphic artists often use 
editors such as DreamWeaver to generate the HTML they need to display graphics in a 
Web page. However, you should understand the HTML code itself in case you need to 
modify an image’s appearance in a way that cannot be done with HTML editors. This 
book assumes you have a working knowledge of HTML. 


You must preview your images because display devices show images differently. The size 
and color of images on your screen will not match those on all of your users’ screens. 
Monitors have variations in color, so an image can look one way on your computer, but 
different on another. Screens also vary in size, so images can look too big or small on 
other systems, even if they are just the right size on yours. You need to be aware of the 
variations so that you can design images that look good on all systems. The best way to 
do this is to test your images on a variety of systems and on a variety of browsers. 


An Overview of Acquiring Images 


Whether you are creating graphics for print, the Web, or other electronic media, you 
need to acquire images on your computer before you can edit them. You can acquire 
images by using graphics software or by using a drawing tablet to create them yourself. 
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You also can draw images on paper, and then scan them with a flatbed scanner. You can 
take pictures with a digital camera and import them into Photoshop, or you can take 
pictures with a film camera and then develop the film on slides, prints, or CDs. You can 
scan slides with a slide scanner, and scan prints with a flatbed scanner. You also can open 
images on a CD, just as you open image files on your desktop. 


Regardless of how you acquire images, you often need to fix defects on an image. Some 
defects are the result of poor quality in the originals. A photo might include flaws, such 
as stray marks or inadequate lighting. A drawing might have weak colors or crooked 
lines. Other defects are the result of the scanning process. You must repair these defects 
before using the images in a Web page. 


Intermediate Web Graphics: Using Background Images, Icons, 
Buttons, and Thumbnail Galleries 


The middle third of this book covers creating and using Web graphics that do not require 
special HTML coding or special Web graphics software; you can create them with any 
image editor. These Web graphics include background images, icons, buttons, and 
thumbnail images. You can apply the skills covered in the intermediate section of this 
book to graphics that are used on or off the Web. 


An Overview of Creating and Using Background Images 


Web pages can display images either as single elements on a page, laid out with blocks 
of text, or as backgrounds behind text and other images. Background images normally 
tile, or repeat, across and down a page. You should create background images so that the 
edges match and the tiling is seamless. 


You can use any combination of tools in Photoshop to create background images, but 
you almost always will use layers, filters, and painting tools. A new image in Photoshop 
has a single layer called the background layer. Other layers are transparent except where 
you create part of an image. You apply layers on top of the background layer to create a 
complete image—where the layer is transparent, you can see through it to any image part 
below. Web pages can include background images, and images in Photoshop and 
ImageReady can include background layers, although background images and back- 
ground layers are not related. 


Most Photoshop filters work by scanning through an image, pixel by pixel, performing 
a mathematical transformation as they go. The Blur filter, for example, combines the val- 
ues for every pair of adjacent pixels to reduce the contrast of edges and make the image 
appear softer. You use painting tools to apply a color to an image. 


An Overview of Creating and Using Icons 


Icons include bullets, symbols, and small pictures, and are some of the most common 
types of Web graphics you will create. The main difference between icons and other Web 
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graphics is that icons are generally small, and working with small graphics requires spe- 
cial consideration. It can be difficult to see the edits you make, for example, and small 
graphics also must convey meaning in a small space. 


To create icons, you need to use the various selection tools in Photoshop. You also can 
use vector drawing tools to create specific shapes because icons often appear in shapes 
other than rectangles. Icons also can have transparent backgrounds. Transparency allows 
rectangular images to have clear areas that let background colors or images show through. 


An Overview of Creating and Using Buttons 


Buttons are a special type of icon. While most icons help identify information on a page, 
buttons are meant to be clicked, taking users to new Web pages. Buttons and icons may 
both include text, which you create using the Type tool in Photoshop. 


Buttons need to look specifically as if they can be clicked, and often use 3-D effects such 
as shadows and highlights to make them appear to pop out of the page. 


An Overview of Creating Thumbnail Galleries 


A gallery of images is a common type of Web page used especially to show a portfolio of 
products, services, or artwork. A gallery includes miniature versions of each image, called 
thumbnails, which link to the full-sized versions. To create many small versions of images, 
you could perform identical operations on all of the full-sized versions, or you could write 
a script that includes those operations, and then instruct Photoshop to run the script with 
all the images. Running a script saves time, particularly if you have hundreds or thousands 
of images to process. Photoshop and ImageReady include commands to generate scripts 
that you can use to process batches of images. At the core of batch image processing in 
Photoshop or ImageReady are actions, which are displayed in the Actions palette. 


Whether you are creating graphics for the Web or another medium, you often need to 
perform the same sequences of edits on multiple images. Batch processing and scripting 
help you do this quickly and simply. 


Advanced Web Graphics: Creating Animations, Rollover Effects, 
Splash Screens, and Sliced Images 


The last third of this book covers advanced Web graphics. These are graphics that require 
special coding to appear on the Web. They include animations, rollover effects, image 
maps, and advanced layout. 


An Overview of Creating Animation for the Web 


Animation is one of the more sophisticated types of Web graphics. You can include ani- 
mations in Web pages by using Flash, Shockwave, Java, SVG, MPEG, or other formats. 
The easiest and most common way to add animation, however, is with the GIF format. 
GIF files can contain single images or multiple images called frames that play in sequence 


Pulling It All Together: An Overview of Professional Web Graphics 31 


like a slide show. If the sequence of images in a GIF file plays quickly, it creates the illu- 
sion of movement similar to television or cinema. Unlike the frames of video or film, 
however, GIF animation frames each can play for a different duration. 


You can adjust the number of frames in a GIF animation, the duration of each frame, and 
how many times the animation repeats. One of the most common applications of GIF 
animation is in the banner ads that appear at the tops of pages of most commercial sites. 


An Overview of Creating Image Rollover Effects 


The Web is considered an interactive medium, especially when compared to other 
media, because you can click links to visit one page after another. This interactivity is 
similar to using a magazine, where you can turn to the page you want, or to watching 
television, where you can tune in to any channel you want. 


Web page interactivity, however, can include more than letting users click links. Using 
Dynamic Hypertext Markup Language (DHTML), you can create additional opportu- 
nities for user interaction, such as rollover effects, which cause images on a page to 
change based on user actions. DHT ML is the combination of JavaScript, Cascading Style 
Sheets (CSS), and advanced features of HTML that work together to give Web pages 
true interactivity. You also can create rollover effects using JavaScript or CSS, and use 
JavaScript in other ways to control how images appear. 


An Overview of Creating Splash Screens 


Splash screens are large images or sets of images that usually appear on the home page 
of a site. They are similar to the splash screens on most software packages, including 
Photoshop and ImageReady. Splash screens can invite your viewers to your site and pro- 
vide information about its contents while other images preload on the other pages of 
your site. Splash screens often appear on informational and personal sites. 


Splash screens, however, are not very common on commercial sites. Most professional 
sites must show relevant information, such as a list of products and services, as soon as 
possible, rather than nested one click away. 


A common way to create a splash screen is to use an image map. An image map is any 
Web graphic that relies on special HTML code to link to multiple destinations, rather 
than being able to link only once. 


An Overview of Creating Sliced Images 


While image maps are often used for splash screens, it is more common to use sliced 
images. You can take any image, cut it into smaller images, and position them in HTML 
tables. This allows you to optimize each slice separately. It also allows you to add ani- 
mation or rollover effects to individual slices. Splash screens using sliced images will rep- 
resent the culmination of all your knowledge of Web graphics. These types of splash 
screens can include backgrounds, buttons, icons, animations, and rollover effects. 
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CHAPTER SUMMARY 


o 


A Web graphic is a computer file that is interpreted by software to create an 
image display. 


Every computer graphic file is defined either as a vector image or as a bitmap 
image. Bitmap images reproduce better texture detail than vector images and 
are the most common type of Web graphic. 


Vector images have smaller file sizes but must be rasterized before they can 
appear in a Web page. To use a vector image in a Web page, the Web browser 
must use a plug-in to convert the vector image into a bitmap image. 


Photoshop and ImageReady are the most popular programs for creating graph- 
ics for the Web. They share most features, though Photoshop has more general 
features, and ImageReady has more features for Web-only graphics. 


Most of the work you do in Photoshop and ImageReady involves using 
palettes, tools in the toolbox, and menu commands. 


You can change the scale and dimension of bitmap images and reverse your 
recent edits as you work with images. 


Basic work with Web graphics includes optimizing, displaying, and acquiring 
images. You can use Photoshop to create common Web graphics such as back- 
ground images, icons, buttons, and thumbnail galleries. You also can create more 
advanced graphics, such as animation, rollover effects, splash screens, and sliced 
images, using Photoshop or ImageReady. 


REVIEW QUESTIONS 


1. What defines a vector image, as compared to a bitmap image? 


a. Small file size, high detail, resolution-independence 


b. Small file size, low detail, resolution-independence 


c. Large file size, high detail, resolution-dependence 


d. Large file size, low detail, resolution-dependence 


2. What is rasterizing? 


a. Converting a bitmap image to a vector image 


b. Converting a pixel to a bitmap image 


c. Converting a vector image to a bitmap image 


d. Converting a vector image to a pixel 


3. What can cause jagged edges in an image? 


a. Changing the dimensions of a bitmap image 


b. Changing the dimensions of a pixel 
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c. Changing the dimensions of a vector image 


d. Converting a vector image to a bitmap image 
4. What is the purpose of plug-ins? 

a. Photoshop uses plug-ins to convert images from one type to another. 

b. Some images must be rasterized into plug-ins before they can be viewed. 

c. Some plug-ins work with browsers to display vector images. 

d. The graphic artist uses plug-ins to convert images from one type to another. 
5. What determines the size of an image file? 


a. For vector images, it is the dimensions of the image; for bitmap images it is the 
number of pixels. 


b. For vector images it is the number of pixels; for bitmap images it is the amount 
of texture detail. 


c. For vector images it is the number of pixels; for bitmap images it is the num- 
ber of shapes and lines. 


d. For vector images it is the number of shapes and lines; for bitmap images it is 
the number of pixels. 


6. What kind of software is Adobe Illustrator and when would you use it? 
a. It is a drawing program and is used for creating bitmap images. 
b. It is a drawing program and is used for creating vector images. 
c. It is an image editor and is used for creating bitmap images. 
d. It is an image editor and is used for creating vector images. 
7. Which palette in Photoshop displays a small version of an image? 
a. Actions palette 
b. Info palette 
c. Navigator palette 
d. Options bar 
8. Which tools help you navigate an image? 
a. Airbrush tool and Eraser tools 
b. Hand tool and Zoom tool 
c. Move tool and Crop tool 
d. Path Selection tools and Shape tools 
9. Where do you find the option to Show Rulers? 
a. On the File menu 
b. On the Select menu 
c. On the View menu 


d. On the Window menu 
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10. Where do you find the dialog box that lets you change the measurement units 
used in Photoshop? 


a. Choose Preferences from the Edit menu, and then choose General. 

b. Choose Preferences from the Edit menu, and then choose Units and Rulers. 
c. Choose Settings from the Edit menu, and then choose Units and Rulers. 

d. Choose Preferences from the File Menu, and then choose Units and Rulers. 


11. If you change the scale of the image display without changing the image file, 
what are you doing? 


a. Changing the image size 
b. Changing the canvas size 
c. Cropping the image 
d. Zooming in or out 
12. What happens when you double-click the Zoom tool in the toolbox? 
a. The image becomes twice as large. 
b. The image reverts to its state the last time it was saved. 
c. The image scales to 100%. 
d. The Zoom tool options window opens. 
13. What happens if you increase the numbers in the Canvas Size dialog box? 
a. The image is cropped by that amount and stretched to the new size. 
b. The image is padded to the new size. 
c. The image is stretched to the new size. 
d. The image is scaled to the new size without affecting the image file. 
14. What happens when you drag the Crop tool over an image? 
a. A selection area appears and defines the area to be cropped. 
b. The image is cropped. 
c. The image is cropped, then stretched to the original size. 
d. The image is trimmed. 
15. Which command does not delete the most recent edit made to an image? 
a. The Revert command 
b. The Step Backward command 
c. The Undo command 


d. None of the above 
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16. What are layers? 


a. Layers are areas of an image that can link to different destinations. 


b. Layers are like sheets of transparent film that each contain different parts of 
an image. 


c. Layers are separate channels that each contain different color information 
about an image. 


d. Layers are slices of an image which can be saved as separate image files. 
17. What tool is not used to create vector shapes in Photoshop? 

a. Lasso tool 

b. Pen tool 

c. Shape tool 

d. Type tool 
18. What tool would you use to create a line with a hard edge? 

a. Airbrush tool 

b. Paintbrush tool 

c. Pen tool 

d. Pencil tool 
19. What does the Magic Wand tool do? 

a. Erases pixels of similar colors 

b. Fills areas with the foreground color 

c. Lets you define selection areas of any shape 

d. Selects pixels in the image of a similar color to the pixel clicked with the tool 
20. What tool or palette cannot tell you the numerical color value of a pixel? 

a. Color palette 

b. Eyedropper tool 

c. Info palette 

d. Swatches palette 
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Project 1: Looking at Bitmap Images 


Find a Web graphic that you like and zoom in on it to see individual pixels. 


Project 
1. Use your Web browser to visit a site you like that uses graphics. 


2. In your browser, point to one image and hold down the mouse button (click the 
right mouse button in Windows). A shortcut menu appears. 
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3. On the shortcut menu, click Save As or Save Image As. A dialog box appears 
where you can specify the name and location of the saved image. Save the image 
as WebImage on your desktop. 


4. Start Photoshop and open WebImage. 
5. Enlarge your view of the image to see the individual pixels. 


6. Return to your original view of the image. 


Project 2: Adding Documentation 
You use Photoshop’s documentation features when collaborating with others on a project. 
1. Open the image file 1-2.tif from the Data Disk. 


2. Select the Notes tool. Make sure your name appears in the Author field in the 
Options bar. 


3. Click the image. In the text box, type a brief message, and then close the text box 
by clicking the small square in the upper-right corner. 


4. Save the image as 1-2.psd in the Chapter 1 folder on your hard drive. The docu- 
mentation is saved with the image. 


Project 3: Setting Preferences 
You often need to edit the way Photoshop works with images. 


1. Change the Photoshop measurement units from inches to pixels. 
2. Display the rulers in the Image window. 


3. Decrease the maximum number of steps the Undo feature reverses from 20 to 10. 


Project 4: Create a New Image 


Practice creating new images. 


1. Click the File menu, and then select New. A dialog box will appear. 
2. In the Name text box, type MyImage. 


3. Set the image size to 200 pixels in width and 150 pixels in height. Set the Mode 
to RGB Color. The Resolution matters only for images that are to be printed. 
You can ignore this option. 


4. Specify that the contents are white. 
5. Save the new image as MyImage in the Chapter 1 folder on your hard drive. 


Project 5: Use the Image Size Feature 
Stretch and shrink an image. 
1. Open the image file 1-5.tif from the Data Disk. 


2. Open the Image Size dialog box. 
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3. Make sure that the Constrain Proportions check box is clear. 
4. Set the Width to 88 pixels and the Height to 400 pixels. 


5. Review the image, which should be half as wide and twice as high as the original 


6. 


image. You have shrunk the width and stretched the height. 
Save the image as 1-5.tif in the Chapter 1 folder on your hard drive. 


Project 6: Use the Trim Command 


Trim an image. 


ND nA 


8. 


. Open the image file 1-6.tif from the Data Disk. 
. Open the Trim dialog box. 


. Set options to trim the bottom and left parts of the image, based on the lower-right 


pixel color. 


. Review the image, which should be cropped only on the bottom and left. 
. Open the Canvas Size dialog box. 
. Set options to pad the bottom and left sides of the image by 5 pixels each. 


. Review the image, which should have a 5-pixel margin on the bottom and left, 


and a larger one on the top and right. 


Save the image as 1-6.tif in the Chapter 1 folder on your hard drive. 


Project 7: Examine Web Sites 


Determine how different Web sites use images. 


l; 
2. 


Use your Web browser to open pages from three different sites you use often. 


Answer the following questions: 


I Are these sites content sites, commerce sites, service sites, promotional sites, or 
combinations of sites? 


o How do the sites use graphics? Are graphics an integral part of the design, or 
are they used only for decoration? 


a Imagine that you work on creating these sites. What sort of images would you 
be asked to create for each site? 


Project 8: Examine Online Portfolios 


Learn how others design their online portfolios. 


1, 
2. 


Use your Web browser to do an online search for graphics portfolios. 


Visit at least three different online portfolios. 
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3. Answer the following questions: 
o How are the portfolios similar? How are they different? 
o What are the portfolios doing well? What are they doing poorly? 


I How would you design your own online graphics portfolio? 


CASE PROJECT 


Over the course of this book you will be completing different projects that will become 
T| the elements of your final project, an online portfolio. This portfolio will include a home 
page, your autobiography, and a gallery of work you’ve accomplished. In future chapters, 
you will learn techniques for creating original Web graphics, and for including them in a 
Web page. For now, you should collect images to use in your portfolio. Begin with an 
image of yourself to use in your autobiography, and continue by making a list of Web sites 
or original illustrations or photographs you’ve created. Additionally, look at other online 
portfolios and think about ways you could imitate the design or graphics that you like. 


